<template>
  <div
    class="modal"
    :id="id"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">
            <slot>上传附件</slot>
          </h4>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <form :id="id + `Form`" method="post" enctype="multipart/form-data">
            <input type="hidden" name="orderType" :value="orderType" />
            <input type="hidden" name="orderId" :value="orderId" />
            <div class="row mb-2">
              <label class="control-label">内容描述</label>
              <div>
                <input type="test" name="fileDesc" v-model="fileDesc" />
              </div>
              <span class="text-muted small"> </span>
            </div>
            <div class="row mb-2">
              <label>选择需要上传的文件</label>
              <input type="file" class="" name="upfile" :id="id + `FileName`" />
              <span class="text-muted small">
                文件名请不要有中文或全角字符，请使用字母或数字命名文件名。
                <br />
                <span class="text-danger">{{ errmsg }}</span>
              </span>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-default btn-sm"
            data-bs-dismiss="modal"
          >
            取消
          </button>
          <button
            type="button"
            class="btn btn-primary btn-lg ms-2"
            @click.stop="ok($event.target)"
          >
            开始上传
          </button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import $ from "jquery";
import { uploadFile } from "@/api/upload.js";

export default {
  props: {
    id: {
      type: String,
      default: "uploadAttachment",
    },
    orderType: 0,
    orderId: 0,
  },
  data() {
    return {
      resolve: "",
      reject: "",
      promise: "",

      errmsg: "",
      fileDesc: "",

      myModal: null,
    };
  },
  methods: {
    ok: function (btn) {
      $(btn).attr("disabled", true);
      this.errmsg = "";
      const t = "#" + this.id + "FileName";
      const filename = $(t).val();

      if (filename.length === 0) {
        this.errmsg = "请选择需要上传的文件";
        $(btn).attr("disabled", false);
        return;
      }

      const formId = "#" + this.id + "Form";
      const formData = new window.FormData($(formId)[0]);

      uploadFile(
        formData,
        (v) => {
          if (v.status === "OK") {
            this.hideModal();
            this.resolve(v);
          } else {
            this.errmsg = "上传失败：" + v.errmsg;
          }
        },
        () => {
          $(btn).attr("disabled", false);
        }, (v) => {
          console.log(v.status)
          console.log(v.statusText)
          console.log(v)
          this.errmsg = v.statusText
        }
      );
    },
    modal: function () {
      this.errmsg = "";
      this.fileDesc = "";
      const t = "#" + this.id + "FileName";
      $(t).val("");

      this.showModal();

      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      return this.promise;
    },
    showModal: function () {
      this.getMyModal().show();
    },
    hideModal: function () {
      this.getMyModal().hide();
    },
    getMyModal: function () {
      if (this.myModal === null) {
        let myModalEl = $(this.$el).get(0);
        this.myModal = new bootstrap.Modal(myModalEl, {
          keyboard: true,
        });
      }

      return this.myModal;
    },
  },
};
</script>
